<template>
	<tm-app ref="app">
		<tm-divider color="black" realColor align="left" label="product details"></tm-divider>
		<tm-cell :margin="[0, 0]" :titleFontSize="30" title="">
			<template v-slot:right>
				<tm-image preview :width="200" :height="200" :src="bs.img"></tm-image>
			</template>
		</tm-cell>
		<tm-text _class="text-overflow-2" :label="bs.name"></tm-text>
		<tm-cell :margin="[0, 0]" :titleFontSize="30" title="count">
			<template v-slot:right>
				<tm-text :label="order.orderimg"></tm-text>
			</template>
		</tm-cell>


		<tm-divider color="black" realColor align="left" label="address"></tm-divider>
		<tm-cell :margin="[0, 0]" :titleFontSize="30" title="name">
			<template v-slot:right>
				<tm-text :label="order.lxr"></tm-text>
			</template>
		</tm-cell>
		<tm-cell :margin="[0, 0]" :titleFontSize="30" title="phone">
			<template v-slot:right>
				<tm-text :label="order.phone"></tm-text>
			</template>
		</tm-cell>
		<tm-cell :margin="[0, 0]" :titleFontSize="30" title="address">
			<template v-slot:right>
				<tm-text :label="order.address"></tm-text>
			</template>
		</tm-cell>
		<tm-cell :margin="[0, 0]" :titleFontSize="30" title="time">
			<template v-slot:right>
				<tm-text :label="order.addtime"></tm-text>
			</template>
		</tm-cell>


		<tm-tabbar v-if="payFlag" :autoSelect="true" v-model:active="acc">
			<tm-button @click="payMoney()" color="red" :width="720" label="pay"></tm-button>
		</tm-tabbar>
	</tm-app>
</template>

<script lang="ts" setup>
	import { ref } from "vue"
	import { onLoad } from "@dcloudio/uni-app"
	import { isEmpty } from "@/tmui/tool/function/util";
	import { queryOrderDetail,topayPal } from '@/api/order'

	const userid = ref('');
	const orderid = ref('');
	const order = ref({});
	const bs = ref({});
	const payFlag = ref(false);

	onLoad((e) => {
		orderid.value = e.id;
		// console.log(orderid.value);
		userid.value = uni.getStorageSync("userid");
		if (isEmpty(userid.value)) {
			uni.navigateTo({
				url: '/pages/auth/auth'
			})
		} else {
			// console.log(orderid);
			getPayDetail();
		}
	})

	const getPayDetail = async () => {
		let param = { "orderid": orderid.value, "userid": userid.value }
		const result = await queryOrderDetail(param);
		// console.log(result);
		order.value = result.order;
		bs.value = result.bs;
		// console.log(order);
		if (order.value.status === '1') {
			payFlag.value = true;
		}
	}
	
	const payMoney = async () => {
		let param = { "orderid": orderid.value, "userid": userid.value }
		const result = await topayPal(param);
		// console.log(result);
		window.location.href = result.url;
		// window.open(result, '_blank')
	}
</script>